/**
 * Created by yujianfu on 2019/9/11.
 */
import React from 'react'

import {Table, Form, DatePicker, Button, Select, Radio, Input, message} from 'antd'

const {RangePicker} = DatePicker
const FormItem = Form.Item
const {Option} = Select;
import {fetchPost} from '../../utils/request'
import moment from 'moment'
import ReportCommon from './ReportCommon'
import Styles from "../common/less/search.less";

class ClRecordDtl extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      params: {},
      startDate: null,
      endDate: null,
      overdueAdminList: [],
      bucketItemList: [],
    }
  }

  componentDidMount() {
    this.getAdminCollectionList()
    this.getAgentListData()
  }

  getAdminCollectionList() {
    fetchPost('/collection/v2/agent/query', {}).then(json => {
      if (json.code === 0) {
        let list = json.data.itemList
        if (list !== null && list.length > 0) {
          this.setState({
            overdueAdminList: list
          })
        }
      } else {
        message.error(json.msg)
      }
    })
  }

  getAgentListData() {
    fetchPost('/collection/v2/agent/common/list').then((res) => {
      if (res.code === 0) {
        if (res.data !== null) {
          this.setState({
            bucketItemList: res.data.bucketItemList,
          })
        }
      } else {
        message.error(res.msg)
      }
    })
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, fieldsValue) => {
      const rangeValue = fieldsValue['range-picker']
      let startDate = moment(rangeValue[0], 'YYYY-MM-DD')
      let endDate = moment(rangeValue[1], 'YYYY-MM-DD')
      let followId = fieldsValue['followId']
      let stageCode = fieldsValue['stageCode']
      let tradeNo = fieldsValue['tradeNo']

      if (typeof followId == 'undefined' || followId == null) {
        followId = ''
      }
      if (typeof stageCode == 'undefined' || stageCode == null) {
        stageCode = ''
      }
      if (typeof tradeNo == 'undefined' || tradeNo == null) {
        tradeNo = ''
      }

      this.setState({
        params: {startDate, endDate, followId, stageCode, tradeNo}
      })
    })
  }

  render() {

    const dateFormat = 'YYYY-MM-DD'
    const rangeConfig = {
      rules: [{type: 'array', required: true, message: 'Please select Time!'}],
      initialValue: [this.state.startDate != null ? moment(this.state.startDate, dateFormat) : moment().subtract(0, 'days'),
        this.state.endDate != null ? moment(this.state.endDate, dateFormat) : moment()]
    }

    const {getFieldDecorator} = this.props.form;

    return (
      <div>
        <Form layout="inline" onSubmit={this.handleSubmit}>
          <FormItem label="Date">
            {getFieldDecorator('range-picker', rangeConfig)(
              <RangePicker/>
            )}
          </FormItem>

          <FormItem label="Name">
            {getFieldDecorator('followId')
            (
              <Select style={{"width": "120px"}}
                      placeholder='Please Select'
                      showSearch={true}
                      optionFilterProp="children"
                      filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                <Option value=''>Please Select</Option>
                {
                  this.state.overdueAdminList.map((item, index) => {
                    return (
                      <Option key={item.followId}
                              value={item.followId.toString()}>{item.name}</Option>
                    )
                  })
                }
              </Select>
            )}
          </FormItem>

          <FormItem label="Bucket">
            {getFieldDecorator('stageCode')
            (
              <Select style={{"width": "120px"}} placeholder='Please Select'>
                <Option value=''>Please Select</Option>
                {
                  this.state.bucketItemList.map((item, index) => {
                    return (
                      <Option key={item.value}
                              value={item.value}>{item.name}</Option>
                    )
                  })
                }
              </Select>
            )}
          </FormItem>

          <FormItem label="Loan ID/Collection No" hasFeedback>
            {getFieldDecorator('tradeNo')(
              <Input placeholder='Please input'
                     style={{'width': '200px'}}/>
            )}
          </FormItem>

          <FormItem>
            <Button type="primary" htmlType="submit">Search</Button>
          </FormItem>

        </Form>

        <br/>
        <ReportCommon params={this.state.params} queryKey="collectionRecordDetails" name={"Collection record details"}/>
        <br/>
      </div>
    )
  }
}

const a = Form.create()(ClRecordDtl)
export default a

